<template>
  <div class="merchants">
    <nav-bar class="nav-bar">
      <div slot="lefts">
        <div class="icons" @click="backClick">
          <img src="@/assets/exit.png" alt="" />
        </div>
      </div>
      <div slot="centers">
        <div class="title-center">招商</div>
      </div>
    </nav-bar>
    <div class="tab-control">
      <div class="contain">
        <div
          class="items"
          v-for="(item, index) in title"
          :key="index"
          @click="itemsClick(index)"
        >
          <div class="title" :class="currentIndex == index ? 'active' : ''">
            {{ item }}
            <span class="line"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="banner">
      <img src="@/assets/join.png" alt="" />
    </div>
    <div class="content">
      <div class="advantage">
        <div class="titles">
          <div class="logo">
            <img src="@/assets/advantage.png" alt="" />
          </div>
          <div class="title-name">优势</div>
        </div>
        <div class="mains">
          俗话说“孤木难成林”，市场再大单打独斗总是很难获得成功。现在选择成为美婲新私密时代的合伙人，可以与一帮志同道合的人一起共创共赢，共享财富和市场。
        </div>
      </div>
      <div class="advantage equity">
        <div class="titles">
          <div class="logo">
            <img src="@/assets/equit.png" alt="" />
          </div>
          <div class="title-name">权益</div>
        </div>
        <div class="mains">
          <p>1. 赠价值 <span>100000</span> 元产品</p>
          <p>2. 赠课程名额 <span>2</span> 名 <span>39600</span> 元</p>
          <p>3. 私密峰会 <span>30</span> 个名额 <span>11400</span> 元</p>
          <p>4. 招募 <span>20</span> 个合伙人免费升级为分公司</p>
        </div>
      </div>
      <div class="advantage equity">
        <div class="titles">
          <div class="logo">
            <img src="@/assets/forword.png" alt="" />
          </div>
          <div class="title-name">权益</div>
        </div>
        <div class="mains">
          <p>
            1. 直推合伙人奖 <span>9000</span> 元/间推合伙人奖
            <span> 3000 </span>元
          </p>
          <p>2. 直推导师 <span>3000</span> 元</p>
        </div>
      </div>
      <div class="buy-us" @click="joinClick">
        <span class="price">¥29800</span> 加入我们
      </div>
    </div>
    <van-action-sheet v-model="isShow" title="基础信息">
      <div class="contents">
        <div class="form-item">
          <div class="icons">
            <img src="@/assets/tuijian.png" alt="" />
          </div>
          <div class="form-items">
            <p>推荐码</p>
            <van-field v-model="value" placeholder="请输入推荐码" />
          </div>
        </div>
        <div class="form-item">
          <div class="icons">
            <img src="@/assets/users.png" alt="" />
          </div>
          <div class="form-items">
            <p>姓名</p>
            <van-field v-model="value" placeholder="请输入真实姓名" />
          </div>
        </div>
        <div class="form-item">
          <div class="icons">
            <img src="@/assets/phone.png" alt="" />
          </div>
          <div class="form-items">
            <p>手机号</p>
            <van-field v-model="value" placeholder="请输入实名手机号" />
          </div>
        </div>
        <div class="form-item">
          <div class="icons">
            <img src="@/assets/verify.png" alt="" />
          </div>
          <div class="form-items">
            <p>验证</p>
            <div class="gain-main">
              <van-field v-model="value" placeholder="请输入短信验证码" />
              <div class="gain" @click="getCode">{{Ytxfont}}</div>
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="icons">
            <img src="@/assets/product-info.png" alt="" />
          </div>
          <div class="form-items">
            <p>货品信息</p>
            <div class="product-main">
              <div
                class="products"
                v-for="(item, index) in productText"
                :key="index"
                @click="productClick(index)"
              >
                <div
                  class="imgs"
                  :class="productIndex == index ? 'img-active' : ''"
                >
                  <img src="@/assets/checks.png" alt="" />
                </div>
                <span :class="productIndex == index ? 'text-active' : ''">{{
                  item
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="pay-us">立即支付授权</div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
export default {
  name: 'merchants',
  components: {
    NavBar,
  },
  data() {
    return {
      title: ['分公司', '加盟商', '导师'],
      currentIndex: 1,
      isShow: false,
      username: '',
      password: '',
      value: '',
      productText: ['存入云仓', '提取发货'],
      productIndex: 0,
      Ytxfont: '获取验证码',
      Traem: true,
      formDate: {
        value: '',
      }
    }
  },
  methods: {
    backClick() {
      this.$router.back()
    },
    getCode() {
      console.log(23)
      if (this.Traem) {
        this.Traem = false
        let langtime = 60
        let than = this
        let a = setInterval(function () {
          if (langtime == 0) {
            than.Traem = true
            than.Ytxfont = '发送验证码'
            clearInterval(a)
          } else {
            langtime--
            // console.log(langtime)
            than.Ytxfont = `还剩${langtime}秒`
          }
        }, 1000)
      } else {
        console.log('不能点了')
      }
    },
    itemsClick(index) {
      this.currentIndex = index
    },
    joinClick() {
      this.isShow = !this.isShow
    },
    onSubmit(values) {
      console.log('submit', values)
    },
    productClick(index) {
      this.productIndex = index
    },
  },
}
</script>

<style lang="scss" scoped>
.merchants {
  font-size: 14px;
  padding-top: 88px;
  height: 100%;
  //height: 100vh;
  overflow: auto;
  background: #290b80;
  .banner {
    width: 100%;
    height: 206px;
    img {
      width: 100%;
    }
  }
}
.content {
  padding: 0 12px;
  margin-top: 5px;
  .advantage {
    padding: 20px 12px;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 12px;
    .titles {
      display: flex;
      .logo {
        width: 24px;
        height: 24px;
        margin-right: 2px;
        img {
          width: 100%;
        }
      }
      .title-name {
        font-weight: 600;
        color: #622ccc;
        font-size: 20px;
      }
    }
  }
  .equity {
    color: #1f0d44;
    span {
      font-size: 16px;
      font-weight: 600;
      color: #ff6400;
    }
  }
}
.tab-control {
  position: fixed;
  top: 44px;
  left: 0;
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: #fff;
  .contain {
    display: flex;
    justify-content: space-between;
    color: #665e75;
    margin: 0 75px;
  }
}
.nav-bar {
  font-size: 16px;
  background-color: #fff;
  z-index: 2909;
  .icons {
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
    }
  }
  .title-center {
    display: flex;
    line-height: 44px;
    font-size: 16px;
    justify-content: space-between;
    font-weight: bolder;
  }
}
.buy-us {
  //position: absolute;
  //left: 12px;
  //bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 351px;
  height: 40px;
  font-size: 16px;
  background: linear-gradient(135deg, #ff5bf4 0%, #622ccc 100%);
  border-radius: 25px;
  margin: 20px 0;
  .price {
    font-size: 20px;
    margin-right: 4px;
  }
}
.active {
  font-size: 16px;
  font-weight: 800;
  color: #1f0d44;
  .line {
    display: block;
    margin: -8px auto 0;
    width: 16px;
    height: 3px;
    background: linear-gradient(135deg, #ff5bf4 0%, #622ccc 100%);
    border-radius: 2px;
  }
}
.contents {
  .form-item {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #ececef;
    margin-bottom: 16px;
    .form-items {
      width: 100%;
    }
    .icons {
      width: 16px;
      height: 16px;
      margin-right: 10px;
      img {
        width: 100%;
      }
    }
  }
}
.gain-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  ::v-deep .van-cell {
    flex: 1;
  }
}
.gain {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 102px;
  //flex: 102px;
  height: 30px;
  background: #ffffff;
  border-radius: 23px;
  opacity: 0.5;
  border: 1px solid #d9d9de;
  color: #622ccc;
}
.pay-us {
  width: 315px;
  height: 40px;
  background: linear-gradient(135deg, #ff5bf4 0%, #622ccc 100%);
  border-radius: 25px;
  color: #fff;
  text-align: center;
  line-height: 40px;
}
.product-main {
  display: flex;
  margin: 16px 0;
  .products {
    display: flex;
    align-items: center;
    margin-right: 34px;
  }
  .imgs {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    border-radius: 50%;
    background-color: #d9d9de;
    img {
      //  padding: 4px;
      width: 80%;
    }
  }
}
.product-main .img-active {
  background-color: #622ccc;
}
.text-active {
  color: #622ccc;
}
::v-deep .van-popup {
  height: 520px;
  padding: 0 30px;
}
::v-deep .van-action-sheet__header {
  text-align: left;
}
::v-deep .van-cell {
  padding: 0;
}
::v-deep .van-cell__value {
  display: flex;
  width: 100%;
  align-items: center;
}
</style>